<div ref="reference" [class]="'el-cascader' + (size ? ' el-cascader--'+size : '')" [class.is-disabled]='disabled'
    (click)="clickHandle($event)" (mouseenter)="inputHover = true" (mouseleave)="inputHover = false">
    <el-input [readonly]="true"
        [model]="inputValue"
        [placeholder]="placeholder"
        [size]="size" [disabled]="disabled"
        (clear)="clearValue($event)">
        <ng-template #suffix>
            <i *ngIf="showClearIcon()" [class]="'el-select__caret el-input__icon  el-icon-circle-close' "
                (click)="clearValue($event)"></i>
            <i *ngIf="!showClearIcon()" [class]="'el-select__caret el-input__icon el-icon-arrow-down '"
                [class.is-reverse]="menuVisible"></i>
        </ng-template>
      </el-input>

    <div *ngIf="multiple()" class="el-cascader__tags">
        <el-tag *ngFor="let tag of presentTags;let i=index;" type="info" [size]="size" [hit]="tag.hitState"
            [closable]="tag.closable"  (close)="deleteTag(i)">
            <span>{{ tag.text }}</span>
        </el-tag>
        <!-- <input v-if="filterable && !isDisabled" v-model.trim="inputValue" type="text" class="el-cascader__search-input"
            :placeholder="presentTags.length ? '' : placeholder" (click)="toggleDropDownVisible(true)"
            @keydown.delete="handleDelete"> -->
    </div>

    <div *ngIf="menuVisible" ref="popper" [class]="' el-popper el-cascader__dropdown ' + popperClass" x-placement="bottom-start" style="position: absolute; top: 35px; left: 0px; z-index: 2117;">
        <el-cascader-panel ref="panel" *ngIf="!filterable" [model]="model" [options]="options" [props]="props"
             (expand-change)="handleExpandChange()"
            (change)="toggleDropDownVisible($event)">
        </el-cascader-panel>
        <!-- <div ref="suggestionPanel" *ngIf="filterable" tag="ul"
            class="el-cascader__suggestion-panel el-cascader__suggestion-list" 
            >
            <ng-container *ngIf="currentLabels.length">
                <li *ngFor="let item of currentLabels; let i = index" 
                    [class]="'el-cascader__suggestion-item'"
                    [class.is-checked]="item.checked"
                    (click)="handleSuggestionClick(i)">
                    <span>{{ item.text }}</span>
                    <i *ngIf="item.checked" class="el-icon-check"></i>
                </li>
            </ng-container>
            <slot v-else name="empty">
                <li class="el-cascader__empty-text">{{ emptyText }}</li>
            </slot>
        </div> -->
    </div>
</div>